<template>
    <div>
        <apply-header></apply-header>
        <div class="main" :style="{'height':((getHeight-70)+'px')}">
            <Side :step="'1'"></Side>
            <section style="overflow: auto">
                <div style="color:#999;font-size:20px;font-weight:700;margin-bottom:5px;">Step 1</div>
                <div style="color:#333;font-size:24px;font-weight:700;margin-bottom:10px;">Choose the Kind of Position That is Relevant to You</div>
                <div style="width: 100%;font-size: 13px">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
                <div style="width: 90%">
                    <position-item v-for="(item,index) in positionList" :key="index" :info="item" @handleSelect="select"></position-item>
                </div>
                <div class="mt30">
                    <el-button @click="preStep" class="yellowBtn">{{preBtnText}}</el-button>
                    <el-button @click="nextStep" :class="{'yellowBtn':true,'grayBtn':disableNext}" :disabled="disableNext">{{nexBtnText}}</el-button>
                </div>

            </section>
        </div>
    </div>
</template>

<script>
    import ApplyHeader from "@/components/ApplyHeader";
    import Side from '@/components/Aside.vue'
    import PositionItem from "@/components/PositionItem";
    // import img from '@/assets/Relevant/pos_custom0.png'
    // import imgCheck from '@/assets/Relevant/pos_checked0.png'
    export default {
        name: "Position",
        components:{
            ApplyHeader,
            Side,
            PositionItem
        },
        created() {
            this.getData()
        },
        data(){
            return{
                selectItem:{},
                positionList:[],
                preBtnText:'< PRE',
                nexBtnText:'NEXT >',
                disableNext:true,
            }
        },
        computed:{
            getHeight(){
                console.log('height',document.documentElement.clientHeight)
                return document.documentElement.clientHeight
            }
        },
        methods:{
            getData(){
                this.positionList = this.$store.state.serviceInfo.positions
                this.positionList.forEach(item=>{
                    this.$set(item,'checked',false)
                })
                console.log('getData()',this.positionList);
            },
            preStep(){
                this.$router.push({path:'/service'})
            },
            nextStep(){
                if(this.selectItem.positionId==undefined){
                    this.$message.error('you must select the position!')
                    return
                }
                var service = this.$store.state.serviceInfo
                this.$router.push({path:service.servicePath})
                this.$store.commit('savePositionInfo',this.selectItem)
                console.log('下一步路由',this.selectItem)
            },
            select(item){
                console.log('点击',item)
                this.positionList.forEach((row)=>{
                    if(row.positionId==item.positionId) {
                        this.selectItem = item
                        this.disableNext=false
                        row.checked=true
                    }
                    else row.checked=false
                })
                console.log("点击完后所有的数据",this.positionList);
            }
        },
        watch:{
            '$route'(to,from){
                if(to.path==='/position'){
                    console.log(from);
                    this.getData()
                }
            }
        }
    }
</script>

<style scoped>

</style>